<?php include("/includes/header.php") ?>
<?php include("/includes/sidebar.php") ?>
<?php $idfo = base64_decode($_GET[trim(base64_encode("id"), '=')]); ?>
<?php
	$gender	= array('m' => 'Male', 'f' => 'Female');
	$sql 		= "SELECT * FROM front_office WHERE id = '".$idfo."'";
	$query 	= mysql_query($sql);
	$data		= mysql_fetch_array($query);
	$data		= validateData($data);
	// print_r($data);
	extract($data);
	$banyak_orang -= 1;

	$sql_guests_details = "SELECT * FROM guests_details WHERE idfront_office = '".$idfo."'";
	$query_guests_details = mysql_query($sql_guests_details);
	$banyak_guests_details = mysql_num_rows($query_guests_details);

	$data_room = getRoom($idroom);
?>

<style type="text/css">
	tbody tr:not(:first-child) td {
		border-top: none !important;
		/*border-bottom: none !important;*/
	}
	tbody tr:not(:last-child) td {
		border-bottom: 1px dotted #ccc !important;
		/*border-bottom: none !important;*/
	}
</style>

<div class="content row-fluid">
	<div class="span12 table-placer">
		<div class="alert alert-info"><h4>Guests Details - <?php echo $data_room["nama"]; ?></h4></div>
		<div class="row-fluid index-pos-placer content">
			<?php
				if (($is_paid == 1) || ($banyak_orang < 1) || ($banyak_orang == $banyak_guests_details)) {
			?>
			<div class="alert alert-info">
			  <p>
			  	Unable to edit this section anymore.
			  	<br>
			  	<a href="fo-index.php" class="btn esc">Exit (ESC)</a>
			  </p>
			</div>
			<?php
				} else {
			?>
				<div class="span12 tabbable tabs-right">
					<ul id="myTab" class="nav nav-tabs">
			<?php
				for ($i=1; $i <= $banyak_orang; $i++) {
					$status_active = "";
					if ($i == 1) {
						$status_active = "active";
					}
			?>
						<li class="<?php echo $status_active; ?>">
							<a href="#person<?php echo $i; ?>" data-toggle="tab">Person <?php echo $i; ?> (CTRL + <?php echo $i; ?>)</a>
						</li>
			<?php
				}
			?>
					</ul>
					<div id="myTabContent" class="tab-content">
			<?php
				for ($i=1; $i <= $banyak_orang; $i++) {
					$status_active = "";
					if ($i == 1) {
						$status_active = "active in";
					}
			?>
							<div class="tab-pane <?php echo $status_active; ?>" id="person<?php echo $i; ?>">
								<div  class="row-fluid">
									<div class="span6">
										<fieldset>
											<div class="control-group">
												<label class="control-label" for="nama">Name</label>
												<div class="controls">
													<input type="text" class="input-xlarge nama" placeholder="Visitor's Name" name="nama">
													<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="pekerjaan">Occupation</label>
												<div class="controls">
													<input type="text" class="input-xlarge pekerjaan" placeholder="Visitor's Occupation" name="pekerjaan">
													<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="tempat_lahir">Place / Date of Birth</label>
												<div class="controls">
													<input type="text" class="input-medium tempat_lahir" placeholder="Place of Birth" name="tempat_lahir">
													/
													<div class="input-append date datePicker" data-date="" data-date-format="yyyy-mm-dd" data-date-autoclose="true" data-date-start-view="decade" data-date-minviewmode="date">
														<input type="text" class="input-medium tanggal_lahir" placeholder="yyyy-mm-dd" name="tanggal_lahir" value="" readonly="">
														<span class="add-on"><i class="icon-calendar"></i></span>
								  					</div>
													<!-- <input type="text" class="input-medium datePicker" placeholder="yyyy-mm-dd" id="date-birth" disabled> -->
													<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="">Gender</label>
												<div class="controls">
													<label class="radio">
														<input type="radio" class="jenis_kelamin" name="jenis_kelamin<?php echo $i; ?>" value="m" checked>
														Male
													</label>
													<label class="radio">
														<input type="radio" class="jenis_kelamin" name="jenis_kelamin<?php echo $i; ?>" value="f">
														Female
													</label>
												</div>
											</div>
										</fieldset>
									</div>
									<div class="span6">
										<fieldset>
											<div class="control-group">
												<label class="control-label" for="email">Email Address</label>
												<div class="controls">
													<input type="text" class="input-xlarge email" placeholder="person@example.com" name="email">
													<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="telepon">Phone Number</label>
												<div class="controls">
													<input type="text" class="input-xlarge telepon" placeholder="+xx-xxxx-xxxx" name="telepon">
													<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="passport">Passport Number</label>
												<div class="controls">
													<input type="text" class="input-xlarge passport" placeholder="xxxxxxx-xxxxxxxxxxx-xxxxxxxxxx" name="passport">
													<!-- <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> -->
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="alamat">Address</label>
												<div class="controls">
													<textarea class="input-xlarge alamat" placeholder="Visitor's Address" name="alamat" rows="3"></textarea>
												</div>
											</div>
										</fieldset>
									</div>
								</div>
							</div>
			<?php
				}
			?>
						<div class="row-fluid">
							<fieldset>
								<div class="form-actions">
									<button id="submit" type="submit" class="btn btn-primary f2">Submit (F2)</button>
									<a href="fo-index.php" class="btn esc">Cancel (ESC)</a>
								</div>
							</fieldset>
						</div>
					</div>
				</div>
			<?php
				}
			?>

		</div>
	</div>
</div>

<div class="footer">
</div>

<?php include("/includes/footer.php") ?>

<script type="text/javascript">

	$(document).ready(function() {
		var elPop;
		$('.index-pos').popover();

		$('.tab-pane.active .nama').focus();
		$(document).keydown(function(event) {
			/* Act on the event */
			var that = event;
			var startNumber = 49;
			var tabAmount = $('.tab-pane').length;
			for (var i = 1; i <= tabAmount; i++) {
				if (that.ctrlKey && (that.keyCode === startNumber)) {
					that.preventDefault();
					$('#myTab a[href="#person'+i+'"]').tab('show');
					$('.tab-pane.active .nama').focus();
				}
				startNumber++;
			};
		});

		$('#submit').click(function(event) {
			/* Act on the event */
			event.preventDefault();
			var guestsDetailsArr = [];
			var i = 1;
			$('.tab-pane').each(function(index, el) {
				var guestsDetailsRowArr = {};
				guestsDetailsRowArr.nama = $(el).find('.nama').val();
				guestsDetailsRowArr.tempat_lahir = $(el).find('.tempat_lahir').val();
				guestsDetailsRowArr.tanggal_lahir = $(el).find('.tanggal_lahir').val();
				guestsDetailsRowArr.jenis_kelamin = $(el).find('.jenis_kelamin:checked').val();
				guestsDetailsRowArr.alamat = $(el).find('.alamat').val();
				guestsDetailsRowArr.pekerjaan = $(el).find('.pekerjaan').val();
				guestsDetailsRowArr.passport = $(el).find('.passport').val();
				guestsDetailsRowArr.email = $(el).find('.email').val();
				guestsDetailsRowArr.telepon = $(el).find('.telepon').val();
				guestsDetailsRowArr.indeks = i;
				guestsDetailsArr.push(guestsDetailsRowArr);
				i++;
			});
			var dataCheckout = {
				act: "guests_details",
				id: '<?php echo $idfo; ?>',
				gd: guestsDetailsArr
			};
			$.ajax({
				url: 'action/act_fo.php',
				type: 'POST',
				dataType: 'json',
				data: dataCheckout,
				cache: false,
			})
			.done(function(data) {
				if (data.status == '1') {
					location.reload();
				};
			})
			.fail(function() {
			})
			.always(function() {
			});

		});
	});
</script>